<link rel="stylesheet" href="/assets/libs/editormd/css/editormd.css"/>
<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
    <input type="hidden" name="alternative_id" id="alternative_id" value="{$id ?? ''}" required
           placeholder="请输入{$title??'休假'}"
           autocomplete="off"
           class="layui-input" readonly>
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="layui-form-item">
                <label class="layui-form-label">选择工作流</label>
                <div class="layui-input-block">
                    <select name="flow_id" lay-verify="required" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        {foreach $flow as $vo}
                        <option value="{$vo.id}" selected>{$vo.flowcode}-{$vo.flowname}</option>
                        {/foreach}

                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">{$title??'休假'}人</label>
                <div class="layui-input-block">
                    <input type="text" name="username" value="{$username ?? ''}" required
                           placeholder="请输入{$title??'休假'}"
                           autocomplete="off"
                           class="layui-input" readonly>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <input type="text" name="group_name" value="{$group_name ?? ''}" required placeholder="请输入项目名称"
                           autocomplete="off"
                           class="layui-input" readonly>
                </div>
            </div>
        </div>
        {if $title neq ""}
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">休假类型</label>
                <div class="layui-input-block">
                    <input type="text" name="alternative_title" value="{$title??'休假'}" required placeholder="请输入休假类型"
                           autocomplete="off"
                           class="layui-input" readonly>
                </div>
            </div>
        </div>
        {else}
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">休假类型</label>
                <div class="layui-input-block">
                    <select lay-search="" lay-filter="testId" lay-verify="required">
                        <option value="">请选择休假类型</option>
                        {foreach $alternatives as $key=>$vo}
                        <option value="{$vo.id}">{$vo.title}</option>
                        {/foreach}
                    </select>
                    <input type="hidden" name="alternative_title" id="alternative_title" placeholder="请输入休假类型"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        {/if}
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">颜色标记</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline" style="margin:0px!important;">
                        <input type="text" value="{$background_color ?? ''}" name="color" lay-verify="required"
                               placeholder="请选择颜色"
                               class="layui-input" id="test-form-input">
                    </div>
                    <div class="layui-inline">
                        <div id="test-form"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">时间范围</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <input type="text" name="start_time" id="start_time" value="{$start ??''}" required
                               placeholder="请输入开始时间"
                               autocomplete="off"
                               class="layui-input" readonly>
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="end_time" id="end_time" value="{$end ??''}" required
                               placeholder="请输入开始时间"
                               autocomplete="off"
                               class="layui-input" readonly>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4" id="dy_time">
            <div class="layui-form-item">
                <label class="layui-form-label">剩余时长</label>
                <div class="layui-input-block">
                    <input type="text"  value="{$sum_jbd ?? 0}" required
                           placeholder="请输入对应结束时间"
                           autocomplete="off"
                           class="layui-input" readonly>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" id="jbd">
            <div class="layui-form-item">
                <label class="layui-form-label">对应加班单</label>
                <div class="layui-input-block">
                    {if $sum_jbd neq 0}
                    <div id="demo1" class="xm-select-demo"></div>
                    {else}
                    <div class="layui-input-inline">
                        <span style="color: red; font-size: 12px">您暂无加班记录,无法进行调休</span>
                    </div>
                    {/if}

                </div>
            </div>
        </div>

        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" id="tiaoxiu">
            <div class="layui-form-item">
                <label class="layui-form-label">调休小时数</label>
                <div class="layui-input-block">
                    <input type="number" placeholder="请输入请假时长,只能填写数字,请假时长按小时计算" id="tx_day" name="days" class="layui-input" value="{$model.day ?? ''}">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" id="qingjia">
            <div class="layui-form-item">
                <label class="layui-form-label">请假天数</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入请假天数" id="qj_day" name="day" class="layui-input" value="{$model.day ?? ''}">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="layui-form-item">
                <label class="layui-form-label">请假事由</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入请假事由" name="remark" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-back-submit" id="LAY-user-back-submit" value="确认">
    </div>
</div>

<script src="/static/admin/layui/layui.js"></script>
<script src="/static/admin/js/xm-select.js"></script>
<script src="/static/admin/js/week_time.js"></script>
<script>
    layui.config({
        base: '/static/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        treeTable: '../admin/lib/extend/authtree'
    }).use(['index', 'form', 'laydate', 'colorpicker'], function () {
        var $ = layui.$, form = layui.form, laydate = layui.laydate, colorpicker = layui.colorpicker;
        $('#dy_time').hide();
        $('#jbd').hide()
        $('#tiaoxiu').show();
        $('#qingjia').hide()
        var title = "{$title}";

        if (title == "调休") {
            $('#dy_time').show();
            $('#jbd').show()
            $('#tiaoxiu').show();
            $('#qingjia').hide()
            $('#qj_day').val('')
        }else{
            $('#dy_time').hide();
            $('#jbd').hide()
            $('#tx_day').val('')
            $('#tiaoxiu').hide();
            $('#qingjia').show()
        }
        $.ajax({
            url: "{:url('overtime/treeList')}",
            type: 'post',
            dataType: 'json',
            success: function (res) {
                xmSelect.render({
                    el: '#demo1',
                    name: 'corresponding',
                    direction: 'auto',
                    data: res
                })
            }
        })


        colorpicker.render({
            elem: '#test-form'
            , color: '{$background_color}'
            , done: function (color) {
                $('#test-form-input').val(color);
            }
        });
        //日期范围
        laydate.render({
            elem: '#start_time'
            , type: 'datetime'
            , format: "yyyy-MM-dd HH:mm"
            , trigger: 'click'//呼出事件改成click
            , value: "{$start}"
        });
        //日期范围
        laydate.render({
            elem: '#end_time'
            , type: 'datetime'
            , format: "yyyy-MM-dd HH:mm"
            , trigger: 'click'//呼出事件改成click
            , value: "{$end}"

        });
        // //日期范围
        // laydate.render({
        //     elem: '#dy_start_time'
        //     , format: "yyyy-MM-dd HH:mm"
        //     , type: 'datetime'
        //     , trigger: 'click'//呼出事件改成click
        // });
        // //日期范围
        // laydate.render({
        //     elem: '#dy_end_time'
        //     , format: "yyyy-MM-dd HH:mm"
        //     , type: 'datetime'
        //     , trigger: 'click'//呼出事件改成click
        // });
        //监听类别
        form.on('select(testId)', function (res) {
            $('#alternative_id').val(res.value);
            $('#alternative_title').val(this.innerText);
            if (this.innerText == "调休") {
                $('#dy_time').show();
                $('#jbd').show()
                $('#tiaoxiu').show()
                $('#qingjia').hide()
                $('#qj_day').val('')
            } else {
                $('#corresponding').val('');
                $('#dy_time').hide();
                $('#jbd').hide()
                $('#tx_day').val('')
                $('#tiaoxiu').hide();
                $('#qingjia').show()
            }
        });

        // form.on('select(myselect)', function (res) {
        //    var zhi = this.innerText;
        //     var strs = new Array(); //定义一数组
        //     if (zhi == '直接选择或搜索选择'){
        //         $('#dy_start_time').val('');
        //         $('#dy_end_time').val('');
        //     }else{
        //         strs = zhi.split("~"); //字符分割
        //         $('#dy_start_time').val(strs[0]);
        //         $('#dy_end_time').val(strs[1]);
        //     }
        //
        // });

        // $.ajax({
        //     url: "{:url('overtime/tree')}",
        //     type: 'post',
        //     dataType: 'json',
        //     success: function (res) {
        //         xmSelect.render({
        //             el: '#demo1',
        //             filterable: true,
        //             data: res,
        //             on: function(data){
        //                 var start_time = $('#start_time').val();
        //                 var end_time = $('#end_time').val();
        //                 var  aa = countSc(start_time ,end_time,8.5,17.5,true,12,14);
        //                 //arr:  当前多选已选中的数据
        //                 console.log(aa);
        //                 var arr = data.arr;
        //                 var count_hour = tiaoxiu = 0;
        //                 $.each(arr,function (index,value) {
        //                     count_hour += value.hour;
        //                 });
        //                 if (count_hour != ""){
        //                     if (aa.days > 0){
        //                         tiaoxiu = ((aa.days) * 7) + aa.hours; //每天上班时间
        //                     }else{
        //                         tiaoxiu =  aa.hours; //每天上班时间
        //                     }
        //                 }
        //
        //                 if(count_hour < tiaoxiu){
        //                     layer.msg("当前加班时间无法支持您调休")
        //                 }
        //
        //             },
        //         })
        //     }
        // });
        form.render();
    });


</script>
